<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>刷卡记录查看</title>
    <link rel="stylesheet" href="../../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../../backend/javascript/laydate/need/laydate.css">
    <link href="../../../css/main_pc.css" rel="stylesheet">
    <link rel="stylesheet" href="../../../css/pc_student_parent.css">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
    <script src="../../../backend/javascript/laydate/laydate.js"></script>
    <script src="../../../backend/javascript/layer/layer.js"></script>
    <script src="../../../js/DateUtils.js"></script>
    <script src="../../../js/left_nav_height.js"></script>
    <script src="../../../js/card_pc.js"></script>
</head>
<body>

<nav class="navbar navbar-default nav-main" role="navigation">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">
                <img class="fl" src="../../../images/img_logo_02.png" alt="logo">
                <span class="fl logo-title">校园门禁管理系统</span>
            </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right right-height">
                <li class="">
                    <span>姓名：</span>
                    <span id="stu_name"></span>
                </li>
                <li class="">
                    <span>班级：</span>
                    <span id="class_name"></span>
                </li>
                <li>
                    <button class="exit-btn">退出</button>
                </li>
            </ul>
        </div>
    </div>
</nav>

<div class="container">
    <ul class="left-nav fl text-center">
        <li class="left-nav-item left-nav-active">刷卡记录</li>
        <li class="left-nav-item">外出审批记录</li>
    </ul>
    <div class="right-detail fl">
        <!-- Nav tabs -->
        <ul class="nav nav-tabs tabs-flex text-center" role="tablist">
            <li role="presentation" class="active">
                <a href="#out" role="tab" data-toggle="tab">出校记录</a>
            </li>
            <li role="presentation">
                <a href="#in" role="tab" data-toggle="tab">进校记录</a>
            </li>
            <li role="presentation">
                <a href="#unusual" role="tab" data-toggle="tab">异常出入记录</a>
            </li>
        </ul>
        <!-- Tab panes -->
        <div class="tab-content  border-top-none">
            <div role="tabpanel" class="tab-pane active" id="out">
                <div class="title-panel text-center">
                    <label for="date-out-start">开始时间：</label>
                    <input id="date-out-start" class="laydate-icon">
                    <label for="date-out-end">结束时间：</label>
                    <input id="date-out-end" class="laydate-icon">
                </div>
                <table class="go-out">
                </table>
                <nav class="pagination-table">
                    <ul class="pagination">
                        <li class=""><a href="#">首页</a></li>
                        <li class=""><a href="#">&laquo;</a></li>
                        <li class="active"><a href="#">1</span></a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                        <li class=""><a href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
            <div role="tabpanel" class="tab-pane" id="in">
                <div class="title-panel text-center">
                    <label for="date-out-start">开始时间：</label>
                    <input id="date-in-start" class="laydate-icon">
                    <label for="date-out-end">结束时间：</label>
                    <input id="date-in-end" class="laydate-icon">
                </div>
                <table class="go-out">
                </table>
                <nav class="pagination-table">
                    <ul class="pagination">
                        <li class=""><a href="#">首页</a></li>
                        <li class=""><a href="#">&laquo;</a></li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                        <li class=""><a href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
            <div role="tabpanel" class="tab-pane" id="unusual">
                <div class="title-panel text-center">
                    <label for="date-out-start">开始时间：</label>
                    <input id="date-unusual-start" class="laydate-icon">
                    <label for="date-out-end">结束时间：</label>
                    <input id="date-unusual-end" class="laydate-icon">
                </div>
                <table class="go-out">
                </table>
                <nav class="pagination-table">
                    <ul class="pagination">
                        <li class=""><a href="#">首页</a></li>
                        <li class=""><a href="#">&laquo;</a></li>
                        <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li><a href="#">&raquo;</a></li>
                        <li class=""><a href="#">末页</a></li>
                    </ul>
                </nav>
            </div>
        </div>
    </div>
</div>

<footer class="text-center">
    <p class="footer-p">©广东省华侨职业技术学校 粤ICP备 0508538号</p>
</footer>
</body>
</html>